body,
html {
    line-height: 1;
    font-family: 'MicrosoftYaHei', 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 320px;
}

li {
    list-style: none;
}

// .clearfix {
//     &:after {
//         content: '';
//         height: 0;
//         line-height: 0;
//         visibility: hidden;
//         clear: both;
//         display: block;
//     }
// }

.clearfix:before,
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.clearfix {
    zoom: 1;
}

@media(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5) {
    .border-bottom-1px {
        &::after {
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
    }
    .border-top-1px {
        &::before {
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
    }
}

@media(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2) {
    .border-top-1px {
        &::before {
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5);
        }
    }
    .border-bottom-1px {
        &::before {
            -webkit-transform: scaleY(.5);
            transform: scaleY(.5)
        }
    }
}

.border-bottom-last {
    background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
    &:last-child {
        background-size: 100% 0px;
    }
}

.border-bottom {
    background-image: linear-gradient(180deg, #d9d9d9, #d9d9d9 50%, transparent 50%);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: bottom;
}